import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

// 导入 nprogress模块
import NProgress from 'nprogress';
// 导入 nprogress样式
import 'nprogress/nprogress.css';


import main from '../page/main/index.vue'
import { useUserStore } from '@/store'
import { useRouterRedirect } from '@/utils'



const routes: Array<RouteRecordRaw> = [
  // ...
  {
    path: "/",
    name: "index",
    component: main,
    meta: {
      isShow: false, // 控制当前项是否在菜单栏中渲染出来，比如你写了 login 页面的路由，但是并不希望 login在menu菜单中渲染出来，即可设为false
      title: '首页', // menu菜单项的名称，没啥好说的
      icon: 'House' // menu菜单项的图标，我此处是与封装好的 svg 组件结合使用的
    },
    children: [
      {
        path: "/home",
        name: "home",
        component: () => import('../page/home/index.vue'),
        meta: {
          isShow: true,
          title: '首页',
          icon: 'House'
        }
      },
      {
        path: "/securityAudit",
        name: "securityAudit",
        component: () => import('../page/securityAudit/index.vue'),
        meta: {
          isShow: true,
          title: '安全审计',
          icon: 'Notebook'
        }
      }
      ,
      {
        path: "/complianceManagement",
        name: "complianceManagement",
        component: () => import('../page/complianceManagement/index.vue'),
        meta: {
          isShow: true,
          title: '合规管理',
          icon: 'Collection'
        }
      }
      ,
      {
        path: "/PIquery",
        name: "PIquery",
        component: () => import('../page/PIquery/index.vue'),
        meta: {
          isShow: true,
          title: 'PI查询',
          icon: 'TrendCharts'
        }
      }
      ,
      {
        path: "/userCenter",
        name: "userCenter",
        meta: {
          isShow: true,
          title: '用户中心',
          icon: 'Box'
        },
        children: [
          
          {
            path: "info",
            name: "info",
            component: () => import('../page/userCenter/info/index.vue'),
            meta: {
              isShow: true,
              title: '用户信息',
              isChild: true,
            },
          }
          ,
          {
            path: "topUp",
            name: "topUp",
            component: () => import('../page/userCenter/balance/index.vue'),
            meta: {
              isShow: true,
              title: '余额管理',
              isChild: true,
            },
          }
          ,
          {
            path: "APIkey",
            name: "API key",
            component: () => import('../page/userCenter/APIkey/index.vue'),
            meta: {
              isShow: true,
              title: 'API key',
              isChild: true,
            },
          }
        ],
      }
      ,
      {
        path: "/system",
        name: "system",
        component: () => import('../page/system/index.vue'),
        meta: {
          isShow: true,
          title: '系统管理',
          icon: 'Setting'
        }
      }
      ,
      {
        path: "/about",
        name: "about",
        component: () => import('../page/about/index.vue'),
        meta: {
          isShow: true,
          title: 'ABOUT',
          icon: 'Cpu'
        }
      }


    ]

  }
  ,
  {
    path: "/login",
    name: "login",
    component: () => import('../page/login/index.vue'),
    meta: {
      isShow: false, // 控制当前项是否在菜单栏中渲染出来，比如你写了 login 页面的路由，但是并不希望 login在menu菜单中渲染出来，即可设为false
      title: '登录', // menu菜单项的名称，没啥好说的
      icon: 'menu-home' // menu菜单项的图标，我此处是与封装好的 svg 组件结合使用的
    }
  },


]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})
// ---------------------- 路由拦截 方法 -----------------------------------//

router.beforeEach((to, from, next) => {
  NProgress.start()
  const userStore = useUserStore()

  const isLogin: boolean = userStore.isLogin
  console.log(isLogin)
  // document.title = `${to.meta.title} | vue-manage-system`;
  //   const role = localStorage.getItem('ms_username');
  if (!isLogin && to.path !== '/login') {
    console.log(to.fullPath + "no login");

    next({
      path: '/login',
      query: { redirect: to.fullPath }
    });

  } else {
    if (!isLogin && to.path === '/login') {
      console.log('登录测试')
      next();
      return
    }
    if (isLogin && to.path === '/login') {
      useRouterRedirect(to, from, next)
      return
    };

    console.log('放行');
    next();
  }
})
router.afterEach(()=>{
  NProgress.done()
})
export default router
